<template>
  <div class="service-management">
    <RepairList v-if="serviceType === 'repair'" />
    <LeasingApplicationList v-if="serviceType === 'leasing'" />
    <DecorationList v-if="serviceType === 'decoration'" />
    <VisitorAppointmentList v-if="serviceType === 'visitor'" />
    <WaterDeliveryList v-if="serviceType === 'water'" />
    <CleaningList v-if="serviceType === 'cleaning'" />
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import RepairList from './RepairList.vue';
import LeasingApplicationList from './LeasingApplicationList.vue';
import DecorationList from './DecorationList.vue';
import VisitorAppointmentList from './VisitorAppointmentList.vue';
import WaterDeliveryList from './WaterDeliveryList.vue';
import CleaningList from './CleaningList.vue';

const props = defineProps({
  serviceType: {
    type: String,
    required: true,
    default: 'repair'
  }
});
</script>

<style scoped>
.service-management {
  padding: 20px;
}
</style> 